import React from 'react'
import {Button, Form, Modal, Select, Table, Tabs, message} from 'antd'
import Pannel from '../../common/components/Pannel'
import Recharge from './Recharge'
import {fetchPost} from "../../../utils/request";
import searchStyle from "../../common/less/search.less";
import Search from "../../common/components/Search";
import Withdraw from "./Withdraw";

const {Option} = Select;
const {TabPane} = Tabs

class Index extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      page: {
        currentPage: 1,
        pageSize: 10,
        totalCount: 0
      },
      loading: false,
      params: {},
      searchParams: {
        list: [
          {
            name: 'Fund Account',
            type: 'select',
            key: 'fundCode',
            className: 'pr20',
            values: [{value: '', name: 'Please Select'}]
          },
          {
            name: '',
            type: 'search',
            key: '',
            className: 'pr20',
            value: []
          }
        ],
        api: '/finance/query',
        loading: true,
      },
      panelParams: [
        {
          name: 'Accumulated recharge',
          value: `₹--`
        },
        {
          name: 'Current balance',
          value: `₹--`
        }
      ],
      fundAccountFlowList: [],
      isRecharge: true,
      fundOperationTypeEnum: 'ADD',
      accountName: null
    }
  }

  showRechargeModal(isRecharge = true) {
    if (this.state.accountName) {
      this.setState({
        RechargeVisible: true,
        isRecharge: isRecharge
      })
    } else {
      message.info("please select Fund Account");
    }
  };

  handleRechargeCancel = e => {
    this.setState({
      RechargeVisible: false,
    })
  }
  handleRechargeOk = e => {
    this.setState({
      RechargeVisible: false,
    })
    this.getData()
  }

  componentDidMount() {

  }

  // 标签切换
  tabOnChange(key) {
    this.setState({
      fundOperationTypeEnum: key,
      page: {
        currentPage: 1,
        pageSize: 10
      }
    }, () => this.getData())
  }

  getData(operationType) {
    if (this.state.params.fundCode != null) {
      this.setState({
        loading: true
      })
      fetchPost(`/finance/fund/account/list?currentPage=${this.state.page.currentPage}&pageSize=${this.state.page.pageSize}`, {
        ...this.state.params,
        fundOperationTypeEnum: this.state.fundOperationTypeEnum
      }).then(json => {
        if (json.data != null && json.code === 0) {
          this.setState({
            fundAccountFlowList: json.data.fundAccountFlowList,
            page: json.page,
            loading: false
          })
        } else {
          this.setState({
            fundAccountFlowList: [],
            page: {
              currentPage: 1,
              pageSize: 10,
              totalCount: 0
            },
            loading: false
          })
        }
      })

      fetchPost(`/finance/fund/account/info`, {
        ...this.state.params,
      }).then(json => {
        if (json.data != null && json.code === 0) {
          let panelParams = [
            {
              name: 'Accumulated recharge',
              value: `₹` + json.data.accumulativeAmount
            },
            {
              name: 'Current balance',
              value: `₹` + json.data.totalBalance + '(frozen:' + json.data.frozenBalance + ')'
            }
          ]
          this.setState({
            panelParams: panelParams,
            accountName: json.data.accountName
          })
        } else {
          this.setState({
            panelParams: [
              {
                name: 'Accumulated recharge',
                value: `₹--`
              },
              {
                name: 'Current balance',
                value: `₹--`
              }
            ]
          })
        }
      })
    } else {
      this.setState({
        fundAccountFlowList: [],
        panelParams: [
          {
            name: 'Accumulated recharge',
            value: `₹--`
          },
          {
            name: 'Current balance',
            value: `₹--`
          }
        ]
      })
    }
  }


  changeParams(params) {
    this.setState({
      params,
    }, () => {
      this.getData();
    })
  }

  nextPage(current) {
    this.setState({
      page: {
        ...this.state.page,
        currentPage: current
      }
    }, () => {
      this.getData();
    });
  }

  render() {
    const self = this
    const pagination = {
      total: this.state.page.totalCount,
      pageSize: this.state.page.pageSize,
      showSizeChanger: false,
      showQuickJumper: false,
      showTotal(total) {
        return `Total ${total} `
      },
      onChange(current) {
        self.nextPage(current)
      }
    }
    const columns = [
      {
        title: 'Date',
        dataIndex: 'date',
        key: 'date',
      }, {
        title: 'Sources of Funds',
        dataIndex: 'fundName',
        key: 'fundName',
      }, {
        title: 'Amount',
        dataIndex: 'availableBalanceAdd',
        key: 'availableBalanceAdd',
      }, {
        title: 'Balance',
        dataIndex: 'totalBalance',
        key: 'totalBalance',
        render: (text, record) => {
          return record.totalBalance + '(frozen:' + record.frozenBalance + ')';
        }
      }, {
        title: 'Transaction Number',
        dataIndex: 'acceptNo',
        key: 'acceptNo',
      }];


    const withdrawColumns = [
      {
        title: 'Date',
        dataIndex: 'date',
        key: 'date',
      }, {
        title: 'Sources of Funds',
        dataIndex: 'fundName',
        key: 'fundName',
      }, {
        title: 'Amount',
        dataIndex: 'availableBalanceSub',
        key: 'availableBalanceSub',
      }, {
        title: 'Balance',
        dataIndex: 'totalBalance',
        key: 'totalBalance',
        render: (text, record) => {
          return record.totalBalance + '(frozen:' + record.frozenBalance + ')';
        }
      }, {
        title: 'Transaction Number',
        dataIndex: 'acceptNo',
        key: 'acceptNo',
      }];
    return (
      <div className='mt20'>
        <div className={searchStyle.searchClass}>
          <Search searchParams={this.state.searchParams} changeParams={(params) => this.changeParams(params)}/>
        </div>
        {
          this.props.location.query.noButton ? '' : <div>
            <Button type='primary' style={{marginBottom: 20}}
                    onClick={() => this.showRechargeModal(true)}>Recharge</Button>
            <Button type='primary' style={{marginBottom: 20, marginLeft: 20}}
                    onClick={() => this.showRechargeModal(false)}>Withdraw</Button>
          </div>
        }
        <Pannel panelParams={this.state.panelParams}/>
        <Tabs defaultActiveKey="ADD" onChange={(e) => this.tabOnChange(e)}>
          <TabPane tab="Recharge record" key="ADD">
            <Table
              size='small'
              pagination={pagination}
              bordered
              dataSource={this.state.fundAccountFlowList}
              rowKey={(record, index) => index}
              columns={columns}
              loading={this.state.loading}
            />
          </TabPane>
          <TabPane tab="Withdraw record" key="WITHDRAW">
            <Table
              size='small'
              pagination={pagination}
              bordered
              dataSource={this.state.fundAccountFlowList}
              rowKey={(record, index) => index}
              columns={withdrawColumns}
              loading={this.state.loading}
            />
          </TabPane>
        </Tabs>

        <Modal
          title={this.state.isRecharge ? "Recharge" : "Withdraw"}
          visible={this.state.RechargeVisible}
          onCancel={this.handleRechargeCancel}
          footer={null}
        >
          {this.state.isRecharge ? <Recharge onOk={this.handleRechargeOk}
                                             fundCode={this.state.params.fundCode}
                                             accountName={this.state.accountName}
            /> :
            <Withdraw onOk={this.handleRechargeOk}
                      fundCode={this.state.params.fundCode}
                      accountName={this.state.accountName}
            />}
        </Modal>

      </div>
    )
  }
}

Index = Form.create()(Index)
export default Index
